<template>
  <div>
    <!--查询表单-->
    <el-form label-position="right" size="small" :inline="true" :model="queryForm" label-width='90px' class="query-form">
      <el-form-item label="姓名">
        <el-input v-model="queryForm.cname" clearable placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="工号">
        <el-input v-model="queryForm.jobNo" clearable placeholder=""></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="getData(1)">查询</el-button>
        <el-button type="primary" icon="el-icon-circle-plus" size="small" @click="dialogAddVisible = true">新增</el-button>
      </el-form-item>
    </el-form>

    <!--客户表格数据展示-->
    <el-table class="table" ref="table" :data="tableData"
        border style="width: 100%;" :header-cell-style="{padding: 0,height: '34px'}"
        @sort-change="sortChange"
      >
      <el-table-column prop="id" label="用户名" sortable="custom" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="cname" label="姓名" sortable="custom" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="jobNo" sortable="custom" label="工号"></el-table-column>
      <el-table-column prop="mobile" sortable="custom" width="150px" label="手机号码"></el-table-column>
      <el-table-column prop="telephone" sortable="custom" label="座机号码"></el-table-column>
      <el-table-column prop="type" sortable label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="delUser(scope.row.id)" size="mini" style="padding: 4px 6px;">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--客户表格数据分页-->
    <el-pagination v-if="count" background layout="total,prev, pager, next"
                   :page-size="pageSize"
                   @current-change="getData"
                   :current-page="currentPage"
                   :total="count" style="float: right;margin-bottom: 20px;">
    </el-pagination>

    <!--新增咨询单-->
    <el-dialog title="新增用户" width="600px" @open="openAdd" @close="closeAdd" class="dialogAdd"
               :visible.sync="dialogAddVisible" :close-on-click-modal='false'>
      <el-form ref="addForm" style="margin-right: 20px;" :model="addForm" :rules="addFormRules" label-position="right" label-width="100px" size="small">
        <el-form-item label="用户名" prop="id">
          <el-input v-model="addForm.id"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="cname">
          <el-input v-model="addForm.cname"></el-input>
        </el-form-item>
        <el-form-item label="工号" prop="jobNo">
          <el-input v-model="addForm.jobNo"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="addForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="座机号" prop="telephone">
          <el-input v-model="addForm.telephone"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'User',
  data () {
    var checkUserName = (rule, value, callback) =>{
        //  4到16位（字母，数字，下划线）
        let reg = /^[a-zA-Z0-9_]{4,16}$/;
        if(reg.test(value)){
            callback()
        }else{
            callback(new Error('请输入4到16位（字母，数字，下划线）'))
        }
    }
    return {
      queryForm: {},    //  查询条件
      prop: 'id', //  排序属性
      order: 1,    //  排序 升序、降序
      tableData: [],    //  当前页数据
      count: '',      //  总数据条数
      currentPage: 1,//默认开始页面
      pageSize: 20,//每页的数据条数
    /************************新增咨询单********************* */
      addForm: {
        id: '',
        cname: ''
      },                //  新增表单 (选择框字段需要先定义)
      addFormRules:{
          id: [{ required: true, validator: this.isNull, trigger: 'blur' },
              { required: true, validator: checkUserName, trigger: 'blur' }],
          cname: [{ required: true, validator: this.isNull, trigger: 'blur' }],
      },//新增校验规则
      dialogAddVisible: false,    //  新增模态框
    }
  },
  mounted(){
    this.getData(1)
  },

  methods: {
    getData(val){
      this.currentPage = val
      let params = {}
      let queryForm = this.deepClone(this.queryForm)
      params.currentPage = val
      params.pageSize = this.pageSize
      params.queryForm = queryForm
      params.prop = this.prop
      params.order = this.order
      this.$post("/api/UserController/getList",params, (data) => {
        this.tableData = data.list;
        this.count = data.count;
      })
    },
    // 排序
    sortChange(obj){
      this.prop = obj.prop || "createTime"
      this.order = obj.order == 'ascending' ? 1 : -1
      this.getData(1)
    },
    //  删除用户
    delUser(id){
      this._confirm('确定删除吗?', () => {
        this.$post('/api/UserController/delOne', {id: id}, (data) => {
          this.$message.success("删除成功！")
          this.getData(1)
        })
      })
    },
  /******************新增***************** */
    // 打开新增模态框
    openAdd(){},
    // 关闭新增模态框
    closeAdd(){
      this.$refs.addForm.resetFields()
    },
    // 确定新增
    add(){
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$post("/api/UserController/addOne", this.addForm, (data) => {
            this.$message.success("添加成功！")
            this.dialogAddVisible = false
            this.getData(1)
            console.log(data)
          })
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
  .dialogAdd {
    .el-input, .el-cascader, .el-select, .el-textarea {
      width: 400px;
    }
  }
</style>

